<template>
  <!-- 个人信息-编辑 -->
  <div class="editInfoPage">
    <MyHead title="个人信息-编辑"></MyHead>
    <div class="form">
      <van-cell-group v-model="infoForm">
        <myPicker
          v-model="infoForm.name"
          value-key="name"
          :form="infoForm"
          name="depart_code"
          :columns="schoolColumns"
          label="所属学校"
          placeholder="请选择学校"
          :norequired="true"
          @click-input="onSchool"
        >
        </myPicker>
        <myPicker
          v-model="infoForm.college_name"
          value-key="college_name"
          :form="infoForm"
          name="college_id"
          :columns="collageColumns"
          label="所属院系"
          placeholder="请选择院系"
          :norequired="true"
        >
        </myPicker>
        <div class="yeat-style">
          <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="infoForm.grade"
            label="入学学年"
            placeholder="请选择入学学年"
            @click="showCalendar = true"
            is-link
          />
          <van-popup v-model="showCalendar" position="bottom">
            <van-picker
              title="入学学年"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showCalendar = false"
            />
          </van-popup>
        </div>
        <myPicker
          v-model="infoForm.gender"
          :form="infoForm"
          value-key="label"
          name="gender"
          :columns="genderList"
          label="性别"
          placeholder="请选择性别"
          :norequired="true"
        ></myPicker>
      </van-cell-group>
    </div>
    <div class="btn-style">
      <van-button
        color="#999999"
        round
        type="info"
        @click="resetForm"
        style="margin-left: 20px"
        >重置</van-button
      >
      <van-button
        color="#E21B1B"
        round
        type="info"
        @click="saveChange"
        style="margin-left: 20px"
        >保存修改</van-button
      >
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      keyword: "",
      openid: $.cookie("openid"),
      infoForm: {
        name: "", //学校
        gender: "", //性别
        grade: "", //学年
      },
      schoolColumns: [], //学校列表
      collageColumns:[], //学院列表
      genderList: [
        {
          id: "0",
          label: "男",
        },
        {
          id: "1",
          label: "女",
        },
      ], //性别
      yearList: [], //年份

      dateValue: "",
      showPicker: false,
      select: null,
      value: "",
      showCalendar: false,
      columns: [],
    };
  },
  computed: {},
  methods: {
    onSchool(key,value){
      if (value) {
        // 选择所属学校后，所属院系数据将清空，重新选择
        this.$set(this.infoForm,'college_name','')
        this.$set(this.infoForm,'college_id','')

        // 获取学院信息
        this.getCollegelist(value)
      }
    },
    //获取学院
    async getCollegelist(depart_code ){
      let res = await this.$ajax.collegelist({
        depart_code:depart_code
      })
      if (res.code ==1) {
        this.collageColumns = res.data
      }
    },
    onSearch(value) {
    },
    onCancel() {},
    /*重置*/
    resetForm() {
      this.getUserInfo();
    },
    /*保存修改*/
    async saveChange() {
      if (this.infoForm.name && this.infoForm.grade && this.infoForm.gender) {
        let res = await this.$ajax.getEditperson({
          openid: this.openid,
          depart_code: this.infoForm.depart_code,
          grade: this.infoForm.grade,
          gender: this.infoForm.gender,
          college_id:this.infoForm.college_id
        });
        if (res.code == 1) {
          this.$toast(res.msg);
          this.changeUserInfo(res.data);
        } else {
          this.$toast(res.msg);
        }
      } else {
        this.$toast("修改个人信息不能为空哟！");
      }
    },
    /*学校列表*/
    // async getSchoolList() {
    //   let res = await this.$ajax.schoollist();
    async getSchoolList() {
      let res = await this.$ajax.schoollist();
      if (res.code == 1) {
        this.schoolColumns = res.data;
      }
    },
    /*获取初始个人信息*/
    async getUserInfo() {
      let res = await this.$ajax.getPersoninfo({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.infoForm = res.data;
        this.getCollegelist(res.data.depart_code);
        this.changeUserInfo(res.data);
      }
    },
    onConfirm(year) {
      this.$set(this.infoForm, "grade", year);
      this.showCalendar = false;
    },
    /*入学学年数据*/ 
    yearTime() {
      let num = new Date(); // 获取当前年
      let year = num.getFullYear(); // 当前年近五年
      for (var i = 0; i < 6; i++) {
        this.columns.push(year - i);
      }
    },
  },
  mounted() {
    this.getSchoolList(); //学校列表
    this.getUserInfo(); //用户信息
    this.yearTime();
  },
  created() {},
};
</script>
  
  <style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.text-style {
  color: rgba(16, 16, 16, 1);
  font-size: 13px;
  font-family: SourceHanSansSC-regular;
  line-height: 30px;
}
.editInfoPage {
  width: 100%;
  min-height: 100vh;
  background-color: rgba(249, 249, 249, 1);

  .btn-style {
    margin-top: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-button {
      width: 80px;
      height: 30px;
      border-radius: 4px;
    }
  }
  .yeat-style {
    padding: 16px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
    font-size: 14px;
  }
  .inpunt-style {
    margin-left: 30px;
    width: 75%;
  }
}
</style>